<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>瀑布流</title>
		<style type="text/css">
			body{
				padding: 0;
				margin: 0;
			}
			
			body{
				background: url(img/bg.jpg) repeat;
			}
			
			img{
				border: none;
			}
			
			a{
				text-decoration: none;
				color: #444;
			}
			
			#titleBar{
				width: 600px;
				margin: 20px auto;
				text-align: center;
			}
			
			@-webkit-keyframes shade{
				/* opacity不透明度 */
				from{opacity: 1;}
				15%{opacity: 0.4;}
				to{opacity: 1;}
			}
			
			@-moz-keyframes shade{
				/* opacity不透明度 */
				from{opacity: 1;}
				15%{opacity: 0.4;}
				to{opacity: 1;}
			}
			
			@-o-keyframes shade{
				/* opacity不透明度 */
				from{opacity: 1;}
				15%{opacity: 0.4;}
				to{opacity: 1;}
			}
			
			@-ms-keyframes shade{
				/* opacity不透明度 */
				from{opacity: 1;}
				15%{opacity: 0.4;}
				to{opacity: 1;}
			}
			
			@keyframes shade{
				/* opacity不透明度 */
				from{opacity: 1;}
				15%{opacity: 0.4;}
				to{opacity: 1;}
			}
			
			#wrap{
				width: auto;
				height: auto;
				margin: 0 auto;
				position: relative;
			}
			
			#wrap .box{
				width: 280px;
				height: auto;
				padding: 10px;
				border: none;
				float: left;
			}
			
			#wrap .box .info{
				width: 280px;
				height: auto;
				border-radius: 8px;
				background: #fff;
			}
			
			#wrap .box .info .pic{
				width: 260px;
				height: auto;
				margin: 0 auto;
				padding-top: 10px;
			}
			
			#wrap .box .info .pic img:hover{
				-webkit-animation: shade 3s ease-in-out 1;
				-moz-animation: shade 3s ease-in-out 1;
				-ms-animation: shade 3s ease-in-out 1;
				-o-animation: shade 3s ease-in-out 1;
				animation: shade 3s ease-in-out 1;
			}
			
			
			#wrap .box .info .pic img{
				width: 260px;
				border-radius: 3px;
			}
			
				
			#wrap .box .info .title:hover{
				-webkit-animation: shade 3s ease-in-out 1;
				-moz-animation: shade 3s ease-in-out 1;
				-ms-animation: shade 3s ease-in-out 1;
				-o-animation: shade 3s ease-in-out 1;
				animation: shade 3s ease-in-out 1;
			}
			
			#wrap .box .info .title{
				width: 260px;
				height: 40px;
				margin: 0 auto;
				line-height: 40px;
				text-align: center;
				color: #666;
				font-size: 18px;
				font-weight: bold;
				overflow: hidden;
			}
		</style>
	
		<script type="text/javascript" src="js/jquery-1.12.4.js"></script>
	</head>
	<body>
		<section id="titleBar">
			<h2>瀑布流</h2>
		</section>
		
		<div id="wrap">
			<div class="box">
				<div class="info">
					<div class="pic"><img src="img/01.jpg"/></div>
					<div class="title"><a href="#">This is a title</a></div>
				</div>
			</div>
			
			<div class="box">
				<div class="info">
					<div class="pic"><img src="img/02.jpg"/></div>
					<div class="title"><a href="#">This is a title</a></div>
				</div>
			</div>
			
			<div class="box">
				<div class="info">
					<div class="pic"><img src="img/03.jpg"/></div>
					<div class="title"><a href="#">This is a title</a></div>
				</div>
			</div>
			
			<div class="box">
				<div class="info">
					<div class="pic"><img src="img/04.jpg"/></div>
					<div class="title"><a href="#">This is a title</a></div>
				</div>
			</div>
			
			<div class="box">
				<div class="info">
					<div class="pic"><img src="img/05.jpg"/></div>
					<div class="title"><a href="#">This is a title</a></div>
				</div>
			</div>
			
			<div class="box">
				<div class="info">
					<div class="pic"><img src="img/06.jpg"/></div>
					<div class="title"><a href="#">This is a title</a></div>
				</div>
			</div>
			
			<div class="box">
				<div class="info">
					<div class="pic"><img src="img/07.jpg"/></div>
					<div class="title"><a href="#">This is a title</a></div>
				</div>
			</div>
			
			<div class="box">
				<div class="info">
					<div class="pic"><img src="img/08.jpg"/></div>
					<div class="title"><a href="#">This is a title</a></div>
				</div>
			</div>
			
			<div class="box">
				<div class="info">
					<div class="pic"><img src="img/09.jpg"/></div>
					<div class="title"><a href="#">This is a title</a></div>
				</div>
			</div>
			
			<div class="box">
				<div class="info">
					<div class="pic"><img src="img/10.jpg"/></div>
					<div class="title"><a href="#">This is a title</a></div>
				</div>
			</div>
			
		</div>
		
		<script type="text/javascript">
			//$(function())==>$(document).ready(function(){})  ?
			
			// == window.onload(function(){})
			$(window).load(function(){
				// AJAX -> records
				var records = [{'src':'01.jpg','title':'This is a title'},
				{'src':'02.jpg','title':'This is a title'},
				{'src':'03.jpg','title':'This is a title'},
				{'src':'04.jpg','title':'This is a title'},
				{'src':'05.jpg','title':'This is a title'},
				{'src':'06.jpg','title':'This is a title'},
				{'src':'07.jpg','title':'This is a title'},
				{'src':'08.jpg','title':'This is a title'},
				{'src':'09.jpg','title':'This is a title'},
				{'src':'10.jpg','title':'This is a title'}
				];
			
				// 1.初始化:
				// 		1.1：DOM中已经有了几个box元素(DOM已经做了)
				//  	1.2: 将DOM中的.box元素放到对应的位置上(JQ)
				PBL('wrap', 'box');
				
				// 2.增加DOM元素
						// 2.1: 时机？页面滚动到底部(事件，scroll)
				$(document).scroll(function(){
					//检验数据
					if(getCheck('wrap', 'box')){
						var $wrap = $('#wrap');
						// 2.2:添加新的.box元素(JQ)
						jQuery.each(records, function(i, record){
							var str = '<div class="box">\
											<div class="info">\
												<div class="pic"><img src="img/'+ record.src +'"/></div>\
												<div class="title"><a href="#">'+ record.title +'</a></div>\
											</div>\
										</div>';
							$wrap.append(str);
						});
						
						// 2.3:将新增的.box元素放到对那个的位置上(JQ)
						PBL('wrap', 'box');
					}
					
				});
						
						
				
			});
			
			function PBL(wrap, box){
				// PBL.1. 获得#wrap和.box
				var $wrap = $('#' + wrap);
				//在wrap下寻找box,速度会提高
				var $boxes = $wrap.find('.' + box);
				
				// PBL.2. 获取屏幕可现实的列数,如果超过3列,显示3列
				var boxWidth = $boxes.eq(0).outerWidth(false);
				var screenWidth = $(window).width();
				 
				var columns = Math.floor(screenWidth/boxWidth);
				if(columns > 3){
					columns = 3;
				}
				
				$wrap.width(boxWidth * columns);
				
				
				// PBL.3. 循环会得到所有的box,按照瀑布流排列
				// 		PBL.3.1 需要一个数组,来记录当前每一列的高度
				var everyH = [];
				for(var i = 0; i < $boxes.length; i++){
					if(i < columns){
				//  	PBL.3.2.-1 如果数组里还没有图片,只是记录高度,图片使用过CSS的float:left天然存在的.
						everyH[i] = $boxes.eq(i).outerHeight(false);
					}else{
				// 		PBL.3.2 每次旨在最短的列上增加新的图片
						var minH = Math.min.apply(null, everyH); //获得最小的列高度
						var minIndex = getIndex(minH, everyH);
						placeBox($boxes.eq(i), minH, Math.floor($boxes.eq(minIndex).position().left), i);
						everyH[minIndex] += $boxes.eq(i).outerHeight(false);
					}
				}		
				

			}
			
			function getIndex(minH, everyH){
				for(index in everyH){
					if(everyH[index] == minH){
						return index;
					}
				}
			}
			
			function getCheck(wrap, box){
				var documentHeight = $(window).height();
				var scrollHeight = $(window).scrollTop();
				
				return documentHeight + scrollHeight >= getLastH(wrap, box) ? true : false;
			}
			
			function getLastH(wrap, box){
				var $wrap = $('#' + wrap);
				var $boxes = $wrap.find('.' + box);
				
				return $boxes.last().position().top + $boxes.last().outerHeight(false);
			}
			
			var getStartNum = 0; //请求更新加载数据的开始位置
			function placeBox($box, top, left, index){
				if(getStartNum >= index) return;
				
				$box.css({
					'position': 'absolute',
					'top': top,
					'left': left,
					'opacity': '0'
				});
				
				$box.stop().animate({
					'opacity': '1'
				}, 999);
				
				getStartNum = index;//更新请求数据的条数位置
			}
		</script>
	</body>

	
</html>
